<!-- 订单详情页 -->
<template>
    <div id="arctive">
        <div class="content-date">
            <div class="content-date-nav">
                <div class="content-date border-b">
                    <div class="content-date-left">订单号：</div>
                    <div class="content-date-right">{{roomlist.receiptcode}}</div>
                </div>
                <div class="content-date">
                    <div class="content-date-left">订单状态：</div>
                    <div class="content-date-right">{{status}}</div>
                </div>
            </div>
        </div>
        <div class="detailed-wrapper">
            <div class="detailed-content">
                <span class="detailed-title">房间类型</span>
                <span class="detailed-number">{{roomlist.typename}}</span>
            </div>
            <div class="detailed-content">
                <span class="detailed-title">房间数量</span>
                <span class="detailed-number">{{roomlist.roomnum}} 间</span>
            </div>
            <div class="detailed-content">
                <span class="detailed-title">入住人</span>
                <span class="detailed-number">{{roomlist.username}}</span>
            </div>
            <div class="detailed-content">
                <span class="detailed-title">手机号</span>
                <span class="detailed-number">{{roomlist.phone}}</span>
            </div>
            <div class="detailed-content">
                <span class="detailed-title">入住时间</span>
                <span class="detailed-number">{{roomlist.holdtime}}</span>
            </div>
             <div class="detailed-content">
                <span class="detailed-title">入离时间</span>
                <span class="detailed-number">{{roomlist.starttime.split(' ')[0]}} --- {{roomlist.endtime.split(' ')[0]}}</span>
            </div>
            <div class="detailed-content">
                <span class="detailed-title">备注</span>
                <span class="detailed-number">{{roomlist.remark}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import apis from '../../../static/js/apis'
import { querystring } from 'vux'
export default {
  data () {
    return {
      id: '',
      userid: '',
      roomlist: {},
      status: '',
      useridobj: {}
    }
  },
  methods: {
    roommsg () {
      this.$axios
        .post(apis + '/shenglian-fast/app/weixinapp/roomreceiptinfo', {
          id: this.id
        })
        .then(response => {
          if (response.status === 200) {
            this.roomlist = response.data.receipt
            console.log(this.roomlist)
            if (this.roomlist.status === 0) {
              this.status = '代付款'
            } else if (this.roomlist.status === 1) {
              this.status = '待入住'
            } else if (this.roomlist.status === 2) {
              this.status = '已入住'
            } else if (this.roomlist.status === 3) {
              this.status = '已完成'
            } else if (this.roomlist.status === 4) {
              this.status = '已评价'
            } else {
              this.status = '已退款'
            }
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    }
  },
  components: {
    apis
  },
  created () {
    this.useridobj = querystring.parse()
    this.userid = this.useridobj.wxuserinfoid
    this.id = this.useridobj.id
    this.roommsg()
  }
}
</script>

<style scoped>
    #arctive {
        padding: 8px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        background-color: #F2F2F2;
        top: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .state-wrapper {
        background: #FFF;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        height: 75px;
        padding: 0 31px 0 16px;
        /*line-height: 30px;*/
    }
    .remind {
        margin-top: 11px;
        font-size: 14px;
        color: #999999;
    }
    .state-wrapper img {
        margin-top: 6px;
        height: 32px;
        width: 32px;
    }
    .content-wrapper {
        box-sizing: border-box;
        padding: 0 16px;
        background-color: #FFF;
        overflow: auto;
        width: 100%;
    }
    .content-date-left {
        text-align: left;
        flex: 1;
        color: #333333;
    }
    .content-date-nav{
        width: 100%;
        padding: 0 16px;
    }
    .content-date {
        margin-top: 8px;
        line-height: 45px;
        /*margin-left: 235px;*/
        display: flex;
        justify-content: flex-end;
        font-size: 14px;
        color: #333;
        background-color: #FFFFFF;
        /*float: right;*/
    }
    .content-nav {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #F2F2F2;
        padding: 15px 0;
    }
    .content-nav img {
        height: 30px;
        width: 30px;
    }
    .content-title {
        display: flex;
    }
    .content-number {
        display: flex;
        flex-direction: column;
        margin-left: 15px;
        font-size: 14px;
        line-height: 15px;
    }
    .deal {
        color: #999999;
    }
    .content-price {
        color: #999999;
        font-size: 14px;
        line-height: 34px;
    }
    .detailed-wrapper {
        margin-top: 8px;
        background: #FFFFFF;
        padding: 0 16px;
    }
    .detailed-content {
        display: flex;
        justify-content: space-between;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        border-top: 1px solid #f2f2f2;
    }
    .detailed-title {
        color: #333333;
    }
    .detailed-number {
        color: #999999;
    }
    .submit-wrapper {
        margin-top: 10px;
        background: #fff;
        width: 100%;
        padding: 16px;
    }
    .feed-title {
        font-size: 14px;
    }
    .feedback-back-text {
        margin: 10px 0;
        width: 100%;
        height: 150px;
        overflow-y: auto;
        border: 1px solid #d7d7d7;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
    }
    .submit {
        width: 50%;
        margin: 20px auto;
        background: #92d4ef;
        color: #fff;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        text-align: center;
        border-radius: 5px;
    }
    .border-b{
        border-bottom: 1px solid #eeeeee;
    }
</style>
